﻿@{
    ViewBag.Title = "我的生活+";
    string url = ViewData["url"].ToString();
}

<div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
    <ol class="carousel-indicators">
        <li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img alt="" src="http://www.bz55.com/uploads/allimg/130628/1-13062Q01611-50.jpg" data-src="" data-holder-rendered="true">
        </div>
        <div class="item">
            <img alt="" src="http://content.battlenet.com.cn/sc2/media/wallpapers/wall036/wall036-1600x900.jpg" data-src="" data-holder-rendered="true">
        </div>
        <div class="item">
            <img alt="" src="http://image.tianjimedia.com/uploadImages/2013/097/JU5HX6YR58HV_1600x900.jpg" data-src="" data-holder-rendered="true">
        </div>
    </div>
    <a class="left carousel-control" role="button" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" role="button" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<br />
<div class="container"></div>

<div class="container">
    <h3>百货</h3>
    <div class="row" id="bh">
    </div>
    <hr />
    <h3>食品</h3>
    <div class="row" id="sp">
    </div>
    <hr />
    <h3>饮料</h3>
    <div class="row" id="yl">
    </div>
</div>


@section Scripts {
    <script>
        $(function () {
            //todo:加载滚动图片
            //todo:加载热销商品
            var url = '@ViewData["url"].ToString()';

            $.getJSON(url + "/api/ProductsApi?productTypeID=2&topNum=4", function (data) {
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    html += '<a href=/Home/Details/' + data[i].ProductCode + '>';
                    html += '<div class="col-xs-6 col-sm-6 col-md-3"><div class="thumbnail">';
                    html += '<img src="' + url + '/UploadFiles/' + data[i].Product.ImgUrl + '" alt="通用的占位符缩略图">';
                    html += '</div>';
                    html += '</a>';
                    html += '<div class="caption">';
                    html += '<h5>' + data[i].Product.ProdcutName + '</h5>';
                    html += '<p style="color:red">价格：￥：' + data[i].Product.DynamicPrice + '</p>';
                    //html += '<p>';
                    //html += '<a href="#" class="btn btn-primary" role="button">';
                    //html += '添加到购物车';
                    //html += '</a></p>';
                    html += '</div></div>';
                }
                $("#bh").empty().append(html);
            });
            $.getJSON(url + "/api/ProductsApi?productTypeID=3&topNum=4", function (data) {
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    html += '<a href=/Home/Details/' + data[i].ProductCode + '>';
                    html += '<div class="col-xs-6 col-sm-6 col-md-3"><div class="thumbnail">';
                    html += '<img src="' + url + '/UploadFiles/' + data[i].Product.ImgUrl + '" alt="通用的占位符缩略图">';
                    html += '</div>';
                    html += '</a>';
                    html += '<div class="caption">';
                    html += '<h5>' + data[i].Product.ProdcutName + '</h5>';
                    html += '<p style="color:red">价格：￥：' + data[i].Product.DynamicPrice + '</p>';
                    //html += '<p>';
                    //html += '<a href="#" class="btn btn-primary" role="button">';
                    //html += '添加到购物车';
                    //html += '</a></p>';
                    html += '</div></div>';
                }
                $("#sp").empty().append(html);
            });
            $.getJSON(url + "/api/ProductsApi?productTypeID=1&topNum=4", function (data) {
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    html += '<a href=/Home/Details/' + data[i].ProductCode + '>';
                    html += '<div class="col-xs-6 col-sm-6 col-md-3"><div class="thumbnail">';
                    html += '<img src="' + url + '/UploadFiles/' + data[i].Product.ImgUrl + '" alt="通用的占位符缩略图">';
                    html += '</div>';
                    html += '</a>';
                    html += '<div class="caption">';
                    html += '<h5>' + data[i].Product.ProdcutName + '</h5>';
                    html += '<p style="color:red">价格：￥：' + data[i].Product.DynamicPrice + '</p>';
                    //html += '<p>';
                    //html += '<a href="#" class="btn btn-primary" role="button">';
                    //html += '添加到购物车';
                    //html += '</a></p>';
                    html += '</div></div>';
                }
                $("#yl").empty().append(html);
            });
        });
    </script>
}